<script setup lang="ts">
const emits = defineEmits<{
  tapWrapper: [];
  tapList: [];
  tapHome: [];
}>();

function toHome() {
  emits("tapHome");
}
</script>

<template>
  <div class="list-control" @click="emits('tapWrapper')">
    <div class="list-control__item" @click="emits('tapList')">
      <img src="~/assets/images/ic_episode.png" alt="" />
      <div class="text">List</div>
    </div>
    <div class="list-control__item list-control__item--home" @click="toHome">
      <img src="~/assets/images/ic_home.png" alt="" />
      <div class="text">Home</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-control {
  position: absolute;
  right: 20px;
  bottom: 140px;
  z-index: 2;

  &__item {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    line-height: 12px;
    font-style: normal;
    margin-top: 25px;

    .text {
      margin-top: 10px;
    }

    img {
      width: 22px;
    }

    &--home {
      img {
        width: 24px;
      }
    }
  }
}
</style>
